<template>
  <div>
<top-header :isLeft="true" title="我的订单"></top-header>

    
<div class="top" >
    <p @click="$router.push({name:'AllOrder'})">全部订单</p>
</div>
<div class="kon" v-show="orderList.length == 0">
      <p>你还没有订单哦~</p>
    </div>
 <div class="content" v-for="(item, index) in orderList" :key="index">
          <div class="content-top">
              <i class="iconfont">&#xeb53;</i>
              <p>{{item.store}} <span>></span></p> 
              
        </div>
        <div class="content1">
            <img :src="getImage(url+item.goodimg)" alt="">
           <div class="title1">
               <p>{{item.title}}</p>
               <p style="color:gray">{{item.goodname}}</p>
            </div> 
            <div class="num">
                <p><span>￥</span>{{item.goodprice}}</p>
                <p>×<span>{{item.num}}</span></p>
            </div>
        </div>
        <div class="foot">
            <p style="color:black">实付款<span>￥{{item.goodprice*item.num}}</span></p>
            <button @click="queren(item)">确认收货</button>
        </div>
      </div>
  </div>
</template>

<script>
import TopHeader from '../components/TopHeader.vue'
import QS from 'qs'
export default {
  components: { TopHeader },
data() {
    return {
         url:'https://i2.chuimg.com/',
        orderList:'',
        totleprice:'',
        type:''
    }
},
created() {
    this.show()
},
methods: {
     getImage(url) {
      // console.log(url);
      if (url !== undefined) {
        return url.replace(
          /^(http)[s]*(\:\/\/)/,
          "https://images.weserv.nl/?url="
        );
      }
    },
    show(){
        this.$ajax.get('/mysql/myorderselect.php',{
            params:{
                id:localStorage.id
            }
        }).then((res)=>{
            this.orderList = res.data
            this.orderList.forEach(i => {
                this.totleprice = i.goodprice*i.num
            });
        })
    },
    queren(item){
        this.$ajax.get('/mysql/myorderdel.php',{
            id:item.id
        }).then((res)=>{
            console.log(res)
            item.type = 0
            let params = {
                id:item.id,
                type:item.type
            };
            this.$ajax.post('/mysql/myorderModify.php',QS.stringify(params)).then((res)=>{
                console.log(res)
            })
            this.$router.go(0)
        })
    }
},
}

</script>
<style lang="scss" scoped>
.kon {
  margin-top: 100px;
  text-align: center;
  font-size: 16px;
}

.top{
 float: right;
 margin-top: -30px;
    p{
        font-size: 18px;
        color: red;
        margin-right: 10px;
          margin-bottom: 0;
    }
}
 .content{
     
        margin: 100px 10px 0;
        .content-top{
            display: flex;
            i{
                font-size: 16px;
               
            }
            p{
                font-size: 16px;
                span{
                    font-weight: bold;
                }
            }
          
        }
        .content1{
            display: flex;
            justify-content: space-around;
           
        .title1{
            p{   
                margin-left: 10px;
        // width: 240px;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;    
        };
            }
            img{
                width: 80px;
                height: 80px;
            }
            .num{
                text-align: center;
            }
        }
    }
    .foot{
        float: right;
        margin-right: 10px;
        button{
            width: 100px;
            height: 40px;
            border: 1px solid red;
            border-radius: 20px;
            background: white;
            color: red;
        }
    }
</style>